<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2022-06-16 20:35:23
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-06-16 20:35:23
-->
<!--
 * @Descripttion: 
 * @version: 
 * @Author: congsir
 * @Date: 2022-06-16 15:48:14
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-06-16 19:07:35
-->
<template>
 <div class="div1">
  <div class="mark">
    <div>
        <h3>收费记录</h3>
    </div>
   <div class="flex">
     <div class="small">
       
            <ul class="left">
              <li>车牌号</li>
              <li>有效期</li>
              <li>停车时长</li>
              <li>入场时间</li>
              <li>入口</li>
            </ul>

            <ul class="right">
              <li>京A77777</li>
              <li>三个月</li>
              <li>7分钟29秒</li>
              <li>2020/07/08    14 : 23</li>
              <li>A入口</li>
            </ul>   
              <div class="div2">
                <img src="../../../public/img/photo_03.png" >
               </div>
    </div>

     <div class="small">
       
            <ul class="left">
              <li>车牌号</li>
              <li>有效期</li>
              <li>停车时长</li>
              <li>入场时间</li>
              <li>入口</li>
            </ul>

            <ul class="right">
              <li>京A77777</li>
              <li>三个月</li>
              <li>7分钟29秒</li>
              <li>2020/07/08    14 : 23</li>
              <li>A入口</li>
            </ul>     
            <div class="div2">
                <img src="../../../public/img/photo_03.png" >
               </div>

    </div>

     <div class="small">
       
            <ul class="left">
              <li>车牌号</li>
              <li>有效期</li>
              <li>停车时长</li>
              <li>入场时间</li>
              <li>入口</li>
            </ul>

            <ul class="right">
              <li>京A77777</li>
              <li>三个月</li>
              <li>7分钟29秒</li>
              <li>2020/07/08    14 : 23</li>
              <li>A入口</li>
            </ul>     
             <div class="div2">
                <img src="../../../public/img/photo_03.png" >
               </div>
    </div>
   </div>
    
 </div>
 </div>



</template>

<script>
  export default {
    data() {
      return {
       
      }
    }
  }
</script>

<style>
.div1{
   
    width:100%;
    height: 100%;
    }
h3{
    margin-bottom: 100px;
   }
.div2{
    width: 100%;
    margin-top: 200px;
   }
.div2 img{
    width:100%;
}
.div1>.mark{
    width: 100%;
    height: 100%;
}
   
.flex{
    width: 100%;
    height: 100%;
    display: flex; 
    justify-content:space-around;
    }
.small{
        width: 35%;
        height: 200px;
        margin-right: 100px;
        padding-left:60px ;
        box-sizing: border-box;
    }        
.left{
            width:30%;
            height: 100%;
            float:left;
            background-color:rgba(128, 128, 128, 0.532) ;
            margin-right: 20px;
            
    }
.left li{
                margin-top: 10px;
                text-align:center;
            }
        
.right{
            width:100%;
            height: 100%;
            border:2px solid gray;
            border-left: none;
           
        }
.right  li{
                margin-top: 10px;
            }

</style>